<!--传入一个function用来接index；传入一个数组用来渲染tab内容-->
<template>
  <div id="box">
    <ul >
      <li v-for="(item , index) in tabLine" @click="chose(index)" :class="{'active':choseBar==index}">{{item.name}}</li>
    </ul>
  </div>
</template>

<script type="text/javascript">
  export default{
    data () {
      return {
        choseBar: 0
      }
    },
    props: {
      tabLine: {
        type: Array,
        default: function () {
          return [{name: 'item1'}, {name: 'item2'}]
        }
      },
      onSelected: {
        type: Function
      },
      selectIndex: {
        default: 0
      }
    },
    methods: {
      chose (index) {
        if (this.choseBar !== index) {
          this.choseBar = index
        }
        this.onSelected(index)
      }
    },
    created () {
      this.choseBar = this.selectIndex
    }
  }
</script>

<style scoped>
  #box{
    display:flex;
    background: white;
    justify-content:center;
    font-size: .14rem;
    height:0.36rem;
    border-bottom: solid 1px #eaeaea;
  }
  ul{
    width:90%;
    padding:0;
    margin: 0;
    height:0.36rem;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
  }
  li{
    box-sizing: border-box;
    list-style:none;
    height:0.36rem;
    font-size: .14rem;
    line-height: 0.36rem;
  }
  li:last-child{
    border:none;
  }
  .active{
    color:#2f9fe9;
    border-bottom: 2px solid #2f9fe9 !important;
  }
</style>
